<template>
  <d2-container>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="待审核">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="300">
          <el-table-column
            fixed
            prop="appraisalNo"
            label="考核单号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120">
          </el-table-column>
          <el-table-column
            prop="templateName"
            label="考核名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="assessName"
            label="考核项"
            width="150">
          </el-table-column>
          <el-table-column
            prop="assessType"
            label="考核类型"
            width="120">
          </el-table-column>
          <el-table-column
            prop="examineName"
            label="被考核人"
            width="150">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="时间"
            width="120">
          </el-table-column>
          <el-table-column
            label="审核人"
            width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.checkInfoName }}
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="考核状态"
            width="120">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
                  <span v-if="scope.row.status==='待审核'">
                    <el-button @click.native.prevent="startScore(scope.$index, tableData)" type="text" size="small">
                      评分
                    </el-button>
                  </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已考核" name="已考核">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="300">
          <el-table-column
            fixed
            prop="appraisalNo"
            label="考核单号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120">
          </el-table-column>
          <el-table-column
            prop="templateName"
            label="考核名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="assessName"
            label="考核项"
            width="150">
          </el-table-column>
          <el-table-column
            prop="assessType"
            label="考核类型"
            width="120">
          </el-table-column>
          <el-table-column
            prop="examineName"
            label="被考核人"
            width="150">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="时间"
            width="120">
          </el-table-column>
          <el-table-column
            label="审核人"
            width="150" align="center">
            <template slot-scope="scope">
              <el-tag style="margin:2px 2px;">{{ scope.row.checkInfoName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="考核状态"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.checkStatus===1">
                已审核
              </span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.checkStatus===1">
                <el-button
                  @click.native.prevent="checkShowDetail(scope.$index, tableData)"
                  type="text"
                  size="small">
                查看详情
                </el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-drawer
      title="评分"
      :visible.sync="drawer"
      :with-header="false"
      @closed="draweclosedr"
      size="50%">
      <start-scoring :revalues="pendingTrial" :user-info="userInfo" @exitScort="exitScort" :score="score"></start-scoring>
    </el-drawer>

    <el-drawer
      title="详细信息"
      :visible.sync="drawer2"
      :with-header="false"
      @closed="draweclosedr"
      size="50%">
      <show-check-detail :revalues="pendingTrial"></show-check-detail>
    </el-drawer>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tablePages.currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="tablePages.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tablePages.total">
      </el-pagination>
    </div>
  </d2-container>
</template>

<script>
import startScoring from '@/views/selfInfo/pendingTrial/startScoring'
import showCheckDetail from '@/views/selfInfo/pendingTrial/showCheckDetail'
export default {
  created () {
    this.getTables(this.tablePages)
  },
  data () {
    return {
      activeName: '待审核',
      tableData: null,
      pendingTrial: null,
      drawer: false,
      drawer2: false,
      userInfo: null,
      score: 0,
      tablePages: {
        // 当前页数
        currentPage: 1,
        // 每页条数
        limit: 5,
        // 总数
        total: 0,
        // 状态
        status: '待审核',
        // 用户id
        id: 4,
        // 审核状态
        checkStatus: 0
      }
    }
  },
  methods: {
    draweclosedr () {
      this.score = 0
    },
    getTables ({ currentPage, limit, status, checkStatus }) {
      this.$request({ url: '/checkInfo/showAllPending', method: 'post', data: { currentPage, limit, data: { status: status, checkStatus: checkStatus } } })
        .then((res) => {
          this.tableData = res.list
          this.tablePages.total = res.total
        })
    },
    handleClick (row) {
      if (row._props.name === '待审核') {
        this.tablePages.status = row._props.name
        this.tablePages.checkStatus = 0
        this.getTables(this.tablePages)
      } else if (row._props.name === '已考核') {
        this.tablePages.status = row._props.name
        this.tablePages.checkStatus = 1
        this.getTables(this.tablePages)
      }
    },
    startScore (index, tableData) {
      this.pendingTrial = tableData[index]
      this.$request({ url: '/checkInfo/getPath', method: 'post', data: { eid: this.pendingTrial.eid } })
        .then((res) => {
          this.userInfo = res
        })
      this.drawer = !this.drawer
    },
    exitScort (status) {
      this.drawer = status
      const setcurrentPage = this.tablePages.currentPage
      const setlimit = this.tablePages.limit
      const userId = this.tablePages.id
      this.getTables({ currentPage: setcurrentPage, limit: setlimit, id: userId, status: '待审核', checkStatus: 0 })
    },
    /**
     * 获取当前分页数
     * @param limit 分页数
     */
    handleSizeChange (limit) {
      this.tablePages.limit = limit
      this.getTables(this.tablePages)
    },
    /**
     * 绑定切换监听事件
     * @param currentPage 切换后的页码
     */
    handleCurrentChange (currentPage) {
      console.log(currentPage)
      this.tablePages.currentPage = currentPage
      this.getTables(this.tablePages)
    },
    checkShowDetail (index, tableData) {
      this.drawer = false
      this.drawer2 = !this.drawer2
      this.pendingTrial = tableData[index]
    }
  },
  components: {
    showCheckDetail,
    startScoring
  }
}
</script>
